<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 用户管理系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body class="bg-light">
    <div class="container">
        <div class="login-container">
            <div class="login-header">
                <h2>用户管理系统</h2>
                <p class="text-muted">请登录您的账户</p>
            </div>
            <div id="error-alert" class="alert alert-danger d-none" role="alert">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <span id="error-message">用户名或密码错误</span>
            </div>
            <form id="login-form">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-person"></i></span>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                        <button class="btn btn-outline-secondary" type="button" id="toggle-password">
                            <i class="bi bi-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="remember-me">
                    <label class="form-check-label" for="remember-me">记住我</label>
                </div>
                <button type="submit" class="btn btn-primary btn-login">登录</button>
            </form>
            <div class="text-center mt-3">
                <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#registerModal">还没有账号？点击注册</button>
            </div>
            <div class="login-footer">
                <p>© 2023 用户管理系统 - 版权所有</p>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="registerModalLabel">用户注册</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="register-error-alert" class="alert alert-danger d-none" role="alert">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        <span id="register-error-message"></span>
                    </div>
                    <form id="register-form">
                        <div class="mb-3">
                            <label for="register-username" class="form-label">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-person"></i></span>
                                <input type="text" class="form-control" id="register-username" name="user_name" placeholder="请输入用户名" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="register-email" class="form-label">邮箱</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                                <input type="email" class="form-control" id="register-email" name="email" placeholder="请输入邮箱" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="register-password" class="form-label">密码</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                <input type="password" class="form-control" id="register-password" name="password" placeholder="请输入密码" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="register-confirm-password" class="form-label">确认密码</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                <input type="password" class="form-control" id="register-confirm-password" name="confirm-password" placeholder="请再次输入密码" required>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="register-submit">注册</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/auth.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 注册表单处理
            const registerForm = document.getElementById('register-form');
            const registerErrorAlert = document.getElementById('register-error-alert');
            const registerErrorMessage = document.getElementById('register-error-message');
            const registerSubmitBtn = document.getElementById('register-submit');
            
            registerSubmitBtn.addEventListener('click', async function() {
                // 获取表单数据
                const username = document.getElementById('register-username').value;
                const email = document.getElementById('register-email').value;
                const password = document.getElementById('register-password').value;
                const confirmPassword = document.getElementById('register-confirm-password').value;
                
                // 验证密码
                if (password !== confirmPassword) {
                    registerErrorMessage.textContent = '两次输入的密码不一致';
                    registerErrorAlert.classList.remove('d-none');
                    return;
                }
                
                // 显示加载状态
                const originalBtnText = registerSubmitBtn.innerHTML;
                registerSubmitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 注册中...';
                registerSubmitBtn.disabled = true;
                
                // 隐藏之前的错误信息
                registerErrorAlert.classList.add('d-none');
                
                // 调用注册API
                const result = await register(username, password, email);
                
                // 恢复按钮状态
                registerSubmitBtn.innerHTML = originalBtnText;
                registerSubmitBtn.disabled = false;
                
                if (result.success) {
                    // 注册成功，关闭模态框并显示成功消息
                    const modal = bootstrap.Modal.getInstance(document.getElementById('registerModal'));
                    modal.hide();
                    alert('注册成功，请登录');
                    
                    // 清空表单
                    registerForm.reset();
                } else {
                    // 显示错误信息
                    registerErrorMessage.textContent = result.message;
                    registerErrorAlert.classList.remove('d-none');
                }
            });
            
            // 如果已经登录，直接跳转到仪表板
            if (isAuthenticated()) {
                window.location.href = '/dashboard';
                return;
            }
            
            // 处理表单提交
            const loginForm = document.getElementById('login-form');
            const errorAlert = document.getElementById('error-alert');
            const errorMessage = document.getElementById('error-message');
            
            loginForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                // 显示加载状态
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalBtnText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 登录中...';
                submitBtn.disabled = true;
                
                // 隐藏之前的错误信息
                errorAlert.classList.add('d-none');
                
                // 调用登录API
                const result = await login(username, password);
                
                // 恢复按钮状态
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
                
                if (result.success) {
                    // 登录成功，跳转到仪表板
                    window.location.href = '/dashboard';
                } else {
                    // 显示错误信息
                    errorMessage.textContent = result.message;
                    errorAlert.classList.remove('d-none');
                }
            });
            
            // 密码显示/隐藏切换
            const togglePasswordBtn = document.getElementById('toggle-password');
            const passwordInput = document.getElementById('password');
            
            togglePasswordBtn.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // 切换图标
                const icon = this.querySelector('i');
                if (type === 'password') {
                    icon.classList.remove('bi-eye-slash');
                    icon.classList.add('bi-eye');
                } else {
                    icon.classList.remove('bi-eye');
                    icon.classList.add('bi-eye-slash');
                }
            });
        });
    </script>
</body>
</html>